<template>
    <div>
        <el-row :gutter="10" style="margin-bottom: 5px">
        <el-col :span="6">
            <el-card>
                <div style="color: #409EFF">用户总数</div>
                <div style="text-align: center;font-weight: bold">
                    <el-tag type="primary">{{all}}</el-tag>
                </div>
            </el-card>
        </el-col>
            <el-col :span="6">
                <el-card>
                    <div style="color: #409EFF">用户总数</div>
                    <div style="text-align: center;font-weight: bold">
                        <el-tag type="primary">{{all}}</el-tag>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div style="color: #409EFF">用户总数</div>
                    <div style="text-align: center;font-weight: bold">
                        <el-tag type="primary">{{all}}</el-tag>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div style="color: #409EFF">用户总数</div>
                    <div style="text-align: center;font-weight: bold">
                        <el-tag type="primary">{{all}}</el-tag>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <div style="display: flex">
            <div id="main" style="width: 500px; height: 400px;margin-right: 200px"></div>
            <div id="add" style="width: 500px;height: 433px" ></div>
        </div>
<!--        <div id="pie" style="width: 500px; height: 400px"></div>-->

        <el-card >
            <div style="padding-bottom:20px;font-size:24px">系统公告</div>
        <el-collapse accordion v-model="activeNames" v-for="(item,index) in notice">
            <el-collapse-item :name="index+''">
<template slot="title">
            <span style="font-size:20px;color:#E6A23C">{{item.name }}</span><i class="header-icon el-icon-info"></i>
            <span style="margin-left: 20px">{{item.time}}</span>
</template>
                <div style="padding: 10px 0px"><el-image :src="item.img" style="width: 100px"></el-image></div>
                <div v-html="item.content"></div>

            </el-collapse-item>
            </el-collapse>
        </el-card>
    </div>

</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "Home",
        data(){
            return{
                all:'',
                activeNames:['0'],
                notice:[],
            }
        },
        created() {
            this.request.get("http://localhost:9090/notice").then(res=>{
                this.notice=res.splice(0,5)
            })
        },
        mounted() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '用户创建时间分布(实时更新)',
                    subtext: '趋势图',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ["第一季度","第二季度","第三季度","第四季度"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    }
                ]
            };
            //var chartDomPie = document.getElementById('pie');
            // var myChartPie = echarts.init(chartDomPie);
            // var optionPie= {
            //     tooltip: {
            //         trigger: 'item'
            //     },
            //     legend: {
            //         top: '5%',
            //         left: 'center'
            //     },
            //     series: [
            //         {
            //             type: 'pie',
            //             radius: '60%',
            //             label:{            //饼图图形上的文本标签
            //                 normal:{
            //                     show:true,
            //                     position:'inner', //标签的位置
            //                     textStyle : {
            //                         fontWeight : 300 ,
            //                         fontSize : 14,    //文字的字体大小
            //                         color: "#fff"
            //                     },
            //                     formatter:'{d}%'
            //                 }
            //             },
            //             data: [],  // 填空
            //             emphasis: {
            //                 itemStyle: {
            //                     shadowBlur: 10,
            //                     shadowOffsetX: 0,
            //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //                 }
            //             }
            //         }
            //     ]
            // };

            var chartDomAdd= document.getElementById('add');
            var myChartAdd= echarts.init(chartDomAdd);
            var optionAdd;
            optionAdd = {
                title: {
                    text: '用户所在地区分布(实时更新)',
                    subtext: '比例图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left:"0%",

                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    axisLabel:{interval: 0},
                    type: 'category',
                    data: ['北京','天津','上海','重庆','河北','山西','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','江西','山东',
                        "河南","湖北","湖南","广东","海南","四川","贵州","云南","陕西","甘肃","青海","内蒙古","广西","西藏","宁夏","新疆"
                    ],
                     inverse:true
        },
                series: [
                    {

                        type: 'bar',
                        data: []
                    },
                ]
            };


            this.request.get("http://localhost:9090/echarts/day").then(res=>{
                option.series[0].data=res

                option&&myChart.setOption(option);

                // optionPie.series[0].data=[
                //     {name:"第一季度",value:res[0]},
                //     {name:"第二季度",value:res[1]},
                //     {name:"第三季度",value:res[2]},
                //     {name:"第四季度",value:res[3]}
                // ]
                // optionPie&&myChartPie.setOption(optionPie)
                // option&&myChart.setOption(option)
            })

             this.request.get("http://localhost:9090/echarts/address").then(res=>{
                 optionAdd.series[0].data=res
                 optionAdd&&myChartAdd.setOption(optionAdd);
                 console.log(res)
             })

            this.request.get("http://localhost:9090/echarts/all").then(res=>{
                this.all=res
            })





        }


    }
</script>

<style scoped>

</style>